<template>
  <el-form :rules="rules" :model="account" ref="ruleFormRef">
    <el-form-item label="账号" prop="name" label-width="60">
      <el-input autocomplete="on" v-model="account.name" />
    </el-form-item>
    <el-form-item label="密码" prop="password" label-width="60">
      <el-input
        type="password"
        autocomplete="on"
        show-password
        v-model="account.password"
      />
    </el-form-item>
  </el-form>
  <div class="account-control">
    <el-checkbox v-model="keepPassword">记住密码</el-checkbox>
    <el-link type="primary">忘记密码</el-link>
  </div>
  <el-button
    type="primary"
    class="login-button"
    @click="login(ruleFormRef)"
    @keyup.enter="login(ruleFormRef)"
    >立即登录
  </el-button>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { rules } from "@/views/login/config/account-config";
import type { FormInstance } from "element-plus";
import { ElForm } from "element-plus";
import cache from "@/utils/cache";
import { useStore } from "vuex";

const store = useStore();
const account = reactive({
  name: cache.getCache("name") ?? "",
  password: cache.getCache("password") ?? "",
});
const keepPassword = ref(true);
const ruleFormRef = ref<FormInstance>();
const login = (formEl: FormInstance) => {
  formEl.validate((res) => {
    if (res) {
      if (keepPassword.value) {
        cache.setCache("name", account.name);
        cache.setCache("password", account.password);
      }
      store.dispatch("accountLoginAction", { ...account });
    }
  });
};
</script>

<style lang="less">
.Mycenter {
  margin-left: 0;
  display: flex;
  justify-content: center;
}

.account-control {
  display: flex;
  justify-content: space-between;
}

.login-button {
  width: 100%;
}
</style>
